<template>
    <view class="searchBar">
    	<image class="left" src="../../static/ty_70.png" mode="widthFix"></image>
    	<input type="text" placeholder="搜索"/>
    </view>
	<view class="content">
		<view v-for="(item, index) in users" :key="index" class="box" @click="toTalk(item)">
			<view class="left">
				<image :src="item.avatar" mode="widthFix"></image>
			</view>
			<view class="middle">
				<view class="username">{{ item.username }}</view>
				<view class="message">{{ item.content }}</view>
			</view>
			<view class="right">
				<view class="time">{{ item.time }}</view>
				<!-- <view class="count">{{ item.count }}</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps(['users'])
const toTalk = (item) => {
	uni.setStorageSync('talking', item)
	uni.navigateTo({
		url: '/pages/talking/talking'
	})
}

</script>

<style lang="scss" scoped>

	.searchBar {
		margin-top: 125rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.left {
			width: 42rpx;
			position: absolute;
			left: 70rpx;
		}
		input {
			background-color: #F4F4F4;
			height: 52rpx;
			width: 500rpx;
			border-radius: 40rpx;
			padding: 20rpx 80rpx;
			
		}
	}
	.content {
		background-color: white;
		margin-top: 70rpx;
		border-radius: 100rpx 100rpx 0 0;
		height: 1500rpx;
		background-color: #F4F4F4;
		.box {
			display: flex;
			height: 160rpx;
			.left {
				width: 96rpx;
				height: 100%;
				margin-left: 44rpx;
				margin-right: 44rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 96rpx;
					border-radius: 60rpx;
				}
			}
			.middle {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 410rpx;
				border-bottom: 1rpx solid #dddddd;
				.username {
					font-size: 32rpx;
					font-weight: 550;
				}
				.message {
					font-size: 24rpx;
					color: #828282;
				}
			}
			
			.right {
				// margin-left: 120rpx;
				font-size: 12rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-end;
				margin-right: 42rpx;
				border-bottom: 1rpx solid #dddddd;
				.time {
					margin: 10rpx 20rpx;
				}
				.count {
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 30rpx;
					margin-right: 25rpx;
					width: 40rpx;
					height: 40rpx;
					background-color: red;
					color: white;
				}
			}
		}
	}
</style>
